<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { Message } from '@arco-design/web-vue'
import { ref } from 'vue'
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const { userInfo, logout } = useAuthStore()
const router = useRouter()
// 导航栏列表
const navList = [
  {
    name: '我的订单',
    path: '/user/order'
  },
  {
    name: '我的优惠卷',
    path: '/user/coupon'
  },
  {
    name: '个人信息',
    path: '/user/profile'
  }
]

const route = useRoute()

// 面包屑
const breadcrumbRoutes = reactive([
  {
    path: '/',
    label: '首页'
  }
])

const currentRoute = navList.find((item) => item.path === route.fullPath)

breadcrumbRoutes.push({
  path: currentRoute?.path!,
  label: currentRoute?.name!
})

// 退出登录
const logoutModalShow = ref(false)

const handleLogout = () => {
  logout()
  router.replace('/home')
  Message.success('退出登录成功！')
}
</script>

<template>
  <div class="bg-#F5F5F5 pt-4 pb-10">
    <!-- 面包屑导航 -->
    <div class="w-1280px mx-auto mb-4">
      <a-breadcrumb :routes="breadcrumbRoutes">
        <template #item-render="{ route, paths }">
          <router-link :to="{ path: route.path }">{{ route.label }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div class="flex w-1280px mx-auto justify-between gap-10">
      <div class="w-240px bg-white h-400px flex-shrink-0">
        <h3 class="text-2xl pl-10 pt-8 pb-6">用户中心</h3>
        <ul class="w-full pl-12">
          <li class="pb-5 text-lg text-gray-7" v-for="{ path, name } in navList" :key="name">
            <router-link :to="{ path: path }" :class="{ 'text-primary': $route.fullPath === path }">
              {{ name }}
            </router-link>
          </li>
          <li class="pb-5 text-lg text-gray-7 cursor-pointer" @click="logoutModalShow = true">退出登录</li>
        </ul>
      </div>
      <!-- 右侧路由 -->
      <div class="flex-1 min-h-540px bg-white">
        <RouterView />
      </div>
    </div>
  </div>

  <!-- 退出登录 -->
  <a-modal v-model:visible="logoutModalShow" @ok="handleLogout">
    <template #title> <span class="text-5">温馨提示</span> </template>
    <div class="text-4 text-center">您确定要退出登录吗？</div>
  </a-modal>
</template>

<style scoped></style>
